<template>
  <div class="visa-form">
    <el-form 
      ref="formRef" 
      :model="formData" 
      :rules="rules" 
      label-width="120px"
      @submit.prevent="handleSubmit"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="申请类型" prop="visaType">
            <el-select v-model="formData.visaType" placeholder="请选择签证类型" style="width: 100%">
              <el-option label="商务签证" value="business" />
              <el-option label="旅游签证" value="tourist" />
              <el-option label="工作签证" value="work" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="国籍" prop="nationality">
            <el-input v-model="formData.nationality" placeholder="请输入国籍" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="姓名" prop="fullName">
            <el-input v-model="formData.fullName" placeholder="请输入姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="formData.gender">
              <el-radio label="male">男</el-radio>
              <el-radio label="female">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="出生日期" prop="birthDate">
            <el-date-picker 
              v-model="formData.birthDate" 
              type="date" 
              placeholder="选择出生日期"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="护照号码" prop="passportNumber">
            <el-input v-model="formData.passportNumber" placeholder="请输入护照号码" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="护照有效期" prop="passportExpiry">
            <el-date-picker 
              v-model="formData.passportExpiry" 
              type="date" 
              placeholder="选择护照有效期"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="formData.phone" placeholder="请输入联系电话" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="邮箱地址" prop="email">
            <el-input v-model="formData.email" placeholder="请输入邮箱地址" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职业" prop="occupation">
            <el-input v-model="formData.occupation" placeholder="请输入职业" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="公司名称" prop="company">
        <el-input v-model="formData.company" placeholder="请输入公司名称" />
      </el-form-item>

      <el-form-item label="来华目的" prop="purpose">
        <el-input 
          v-model="formData.purpose" 
          type="textarea" 
          :rows="3"
          placeholder="请详细说明来华目的和行程安排"
        />
      </el-form-item>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="预计入境日期" prop="entryDate">
            <el-date-picker 
              v-model="formData.entryDate" 
              type="date" 
              placeholder="选择预计入境日期"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预计离境日期" prop="exitDate">
            <el-date-picker 
              v-model="formData.exitDate" 
              type="date" 
              placeholder="选择预计离境日期"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="在华住址" prop="address">
        <el-input v-model="formData.address" placeholder="请输入在华住址" />
      </el-form-item>

      <el-form-item label="紧急联系人" prop="emergencyContact">
        <el-input v-model="formData.emergencyContact" placeholder="请输入紧急联系人姓名和电话" />
      </el-form-item>

      <el-form-item label="备注" prop="remarks">
        <el-input 
          v-model="formData.remarks" 
          type="textarea" 
          :rows="3"
          placeholder="其他需要说明的信息"
        />
      </el-form-item>

      <el-form-item>
        <el-checkbox v-model="formData.agreeTerms">
          我已阅读并同意《签证申请服务协议》
        </el-checkbox>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleSubmit" :loading="loading">
          提交申请
        </el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'VisaForm',
  emits: ['submit'],
  setup(props, { emit }) {
    const formRef = ref(null)
    const loading = ref(false)

    const formData = reactive({
      visaType: '',
      nationality: '',
      fullName: '',
      gender: '',
      birthDate: '',
      passportNumber: '',
      passportExpiry: '',
      phone: '',
      email: '',
      occupation: '',
      company: '',
      purpose: '',
      entryDate: '',
      exitDate: '',
      address: '',
      emergencyContact: '',
      remarks: '',
      agreeTerms: false
    })

    const rules = {
      visaType: [
        { required: true, message: '请选择签证类型', trigger: 'change' }
      ],
      nationality: [
        { required: true, message: '请输入国籍', trigger: 'blur' }
      ],
      fullName: [
        { required: true, message: '请输入姓名', trigger: 'blur' }
      ],
      gender: [
        { required: true, message: '请选择性别', trigger: 'change' }
      ],
      birthDate: [
        { required: true, message: '请选择出生日期', trigger: 'change' }
      ],
      passportNumber: [
        { required: true, message: '请输入护照号码', trigger: 'blur' }
      ],
      passportExpiry: [
        { required: true, message: '请选择护照有效期', trigger: 'change' }
      ],
      phone: [
        { required: true, message: '请输入联系电话', trigger: 'blur' }
      ],
      email: [
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
      ],
      occupation: [
        { required: true, message: '请输入职业', trigger: 'blur' }
      ],
      purpose: [
        { required: true, message: '请详细说明来华目的', trigger: 'blur' }
      ],
      entryDate: [
        { required: true, message: '请选择预计入境日期', trigger: 'change' }
      ],
      exitDate: [
        { required: true, message: '请选择预计离境日期', trigger: 'change' }
      ],
      address: [
        { required: true, message: '请输入在华住址', trigger: 'blur' }
      ],
      emergencyContact: [
        { required: true, message: '请输入紧急联系人', trigger: 'blur' }
      ]
    }

    const handleSubmit = async () => {
      if (!formData.agreeTerms) {
        ElMessage.warning('请先同意服务协议')
        return
      }

      try {
        await formRef.value.validate()
        loading.value = true
        
        // 模拟提交
        setTimeout(() => {
          emit('submit', formData)
          loading.value = false
        }, 1000)
      } catch (error) {
        console.log('表单验证失败:', error)
      }
    }

    const handleReset = () => {
      formRef.value.resetFields()
    }

    return {
      formRef,
      formData,
      rules,
      loading,
      handleSubmit,
      handleReset
    }
  }
}
</script>

<style scoped>
.visa-form {
  padding: 20px 0;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-checkbox {
  margin-left: 0;
}
</style> 